import PropTypes from "prop-types";
function View({ image, name, time, recommendNum, commentNum }) {
  return (
    <div className="opear">
      <div className="author-con">
        {/* 发布者 */}
        <div className="author-avatar-name">
          <img src={image} className="author-avatar left" />
          <span className="left author-name">{name}</span>
        </div>
        {/* 发布时间 */}
        <span className="left time-enter timeago">
          <span className="time-update">{time}</span>
          入榜
        </span>
        <span className="left separate-line"></span>
        <a className="left category-box">
          <i className="category-icon news-icon"></i>
        </a>
      </div>
      {/* 点赞 */}
      <div className="operate-con">
        {/* 热度 */}
        <a className="operate-item">
          <span className="recommend-icon left">
            <span className="recommend-icon-img"></span>
          </span>
          <span className="recommend-num left">{recommendNum}</span>
        </a>
        {/* 评论 */}
        <a className="operate-item">
          <span className="comment-icon left"></span>
          <span className="comment-num left">{commentNum}</span>
        </a>
        {/* 点赞 */}
        <a className="operate-item">
          <span className="save-icon">
            <span className="save-icon-img"></span>
          </span>
        </a>
        {/* 转发 */}
        <a className="operate-item share share-level left">
          <span className="share-icon"></span>
        </a>
      </div>
    </div>
  );
}
Comment.propTypes = {
  image: PropTypes.string,
  name: PropTypes.string,
  time: PropTypes.string,
  recommendNum: PropTypes.number.isRequired,
  commentNum: PropTypes.number.isRequired,
};
export default View;
